<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷结果 - 问卷调查系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center">
                    <a href="UI.html" class="flex items-center">
                        <i class="ri-arrow-left-line text-2xl text-gray-600 mr-2"></i>
                        <span class="text-xl font-semibold text-gray-800">问卷结果</span>
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <button class="p-2 rounded-lg hover:bg-gray-100">
                        <i class="ri-refresh-line text-xl text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-lg hover:bg-gray-100">
                        <i class="ri-settings-3-line text-xl text-gray-600"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold text-gray-800">问卷完成情况</h2>
                    <div class="flex items-center space-x-4">
                        <div class="relative flex items-center">
                            <input type="text" id="searchInput" class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="按姓名搜索">
                            <i class="ri-search-line absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <button id="searchBtn" class="ml-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-1 gap-6">
                    <div class="bg-indigo-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-indigo-600">已完成问卷</p>
                                <p class="text-2xl font-bold text-indigo-600">12</p>
                            </div>
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
                                <i class="ri-file-list-3-line text-2xl text-indigo-600"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 问卷列表 -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-6">问卷列表</h2>
                <div class="space-y-4">
                    <!-- 问卷项目 -->
                    <div class="border-b pb-4 last:border-b-0">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-medium text-gray-800">问卷调查1</h3>
                                <p class="text-sm text-gray-600">完成时间：2024-03-20 14:30</p>
                            </div>
                            <div class="flex items-center space-x-4">
                                <span class="text-sm text-gray-600">姓名:张三</span>
                                <span class="text-sm text-gray-600">得分：85</span>
                                <a href="detail.html" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    查看详情
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 更多问卷项目... -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 检查登录状态
        function checkLoginStatus() {
            // 这里添加登录状态检查逻辑
            // 如果未登录，重定向到登录页面
            // window.location.href = 'Login.html';
        }

        // 页面加载时检查登录状态
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
        });

        // 搜索功能
        function performSearch() {
            const searchText = document.getElementById('searchInput').value.toLowerCase();
            const questionnaireItems = document.querySelectorAll('.border-b');
            
            questionnaireItems.forEach(item => {
                const name = item.querySelector('h3').textContent.toLowerCase();
                if (name.includes(searchText)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // 点击查询按钮时执行搜索
        document.getElementById('searchBtn').addEventListener('click', performSearch);

        // 按回车键执行搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    </script>
</body>
</html> 